<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">
				<view class="tabs flex-row">
					<view @click="toggleTab(0)" class="tab" :class="{active: tabIndex == 0}">我的作业</view>
					<view @click="toggleTab(1)" class="tab" :class="{active: tabIndex == 1}">作业审批</view>
					<view @click="toggleTab(2)" class="tab" :class="{active: tabIndex == 2}">作业检查</view>
				</view>
			</view>
			<view class="right flex-row" style="justify-content: flex-end;">
				<uni-icons @click="toPage('add')" type="plusempty" size="26" color="#1692DC" style="margin-right: 10upx;"></uni-icons>
				<uni-icons @click="toPage('../search?type=road')" type="search" size="26" color="#1692DC"></uni-icons>
			</view>
		</view>
		<scroll-view scroll-y="true" class="body">
			<!--列表-->
			<view v-if="list.length" class="scroll">
				<view v-for="(item, index) in list" :key="index" @click="toDetail(item)" class="card">
					<view class="title flex-row">
						<view class="name">断路作业</view>
						<view>作业编号：{{ tabIndex == 2 ? item.job_id : item.job_num }}</view>
					</view>
					<view class="item"><view>开始时间：{{ item.start_time }}</view></view>
					<view class="item"><view>结束时间：{{ item.over_time }}</view></view>
					<view class="item"><view>作业内容：{{ item.content || '无' }}</view></view>
					<view v-if="tabIndex == 2" class="item flex-row btns">
						<view class="btn" style="width: auto;padding: 0 20upx;">{{ item.check_type }}</view>
						<view class="btn" style="width: auto;padding: 0 20upx;">第{{ item.check_num }}次检查</view>
					</view>
					<view v-else class="item flex-row btns">
						<view v-if="item.status == 1" class="btn success">申请成功</view>
						<view v-if="item.status == 2" class="btn success">监督通过</view>
						<view v-if="item.status == 3" class="btn error">监督不通过</view>
						<view v-if="item.status == 4" class="btn success">审批合格</view>
						<view v-if="item.status == 5" class="btn error">审批不通过</view>
						<view v-if="item.status == 6" class="btn success">现场培训通过</view>
						<view v-if="item.status == 7" class="btn error">现场培训不通过</view>
						<view v-if="item.status == 8" class="btn">正在作业</view>
						<view v-if="item.status == 9" class="btn">待验收</view>
						<view v-if="item.status == 10" class="btn success">验收通过</view>
						<view v-if="item.status == 11" class="btn error">验收不通过</view>
					</view>
					<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
				</view>
				<view class="nodata">没有更多了~</view>
			</view>
			<view v-else class="nodata">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue";
export default{
	components: { uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			tabIndex: 0,
			page: 1,
			total: 1,
			list: []
		}
	},
	onLoad(){
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
	},
	onShow(){
		this.getList();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		toDetail(item){
			uni.setStorageSync('jobTicketFireDetail', item);
			if(this.tabIndex == 0) uni.navigateTo({url: 'detail'});
			if(this.tabIndex == 1) uni.navigateTo({url: 'detailCheck?id='+item.id});
			if(this.tabIndex == 2) uni.navigateTo({url: 'inspect?id='+item.id});
		},
		toggleTab(index){
			this.tabIndex = index;
			this.page = 1;
			this.list = [];
			this.getList();
		},
		// 获取列表
		getList(){
			let _this = this;
			let api = '';
			
			// 处理接口
			if(this.tabIndex == 0) api = 'jobTicketListMine';
			if(this.tabIndex == 1) api = 'jobTicketListCheck';
			if(this.tabIndex == 2) api = 'jobTicketCheckList';
			
			uni.request({
				url: this.$API[api],
				data: {
					userid: this.userid,
					type: '断路作业',
					page: this.page
				},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

/*切换*/
.tabs{
	justify-content: space-around;
	border: 2upx solid #5F96F2;
	border-radius: 40upx;
	overflow: hidden;
	margin: 0 auto;
	width: 360upx;
}
.tabs .tab{
	font-size: 24upx;
	padding: 4upx 0;
	color: #5F96F2;
	width: 50%;
}
.tabs .tab.active{
	color: #fff;
	background: #5F96F2;
}

.body{
	height: calc(100vh - 88upx - var(--status-bar-height));
}

/*卡片*/
.card{
	background: #fff;
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card .title{
	margin-bottom: 20upx;
	justify-content: flex-start;
}
.card .title view{
	height: 42upx;
	font-size: 32upx;
}
.card .title view.name{
	text-indent: 20upx;
	margin-right: 40upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item view{
	font-size: 32upx;
}
.card .item text{
	color: #41A4E8;
}
.card .item.btns{
	margin-bottom: 16upx;
	padding-top: 10upx;
	justify-content: flex-start;
}
.card .item.btns .btn{
	color: #fff;
	width: 160upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: #1692DC;
}
.card .item.btns .btn.error{
	background: red;
}
.card .item.btns .btn.success{
	background: #00CE1C;
}
.card uni-icons,
.card .uni-icons{
	position: absolute;
	right: 10upx;
	top: calc(50% - 48upx);
}
</style>
